混合グラフの種類

Chart.js を使用すると、2 つ以上の異なるグラフ タイプを組み合わせた混合グラフを作成できます。一般的な例は、折れ線データセットも含まれる棒グラフです。

混合チャートの作成は、基本チャートの初期化から始まります。

var myChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

この時点で、標準的な棒グラフが完成しました。次に、データセットの 1 つをライン データセットに変換する必要があります。

var mixedChart = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [{
            label: 'Bar Dataset',
            data: [10, 20, 30, 40]
        }, {
            label: 'Line Dataset',
            data: [50, 50, 50, 50],

            // Changes this dataset to become a line
            type: 'line'
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: options
});

この時点で、希望どおりにレンダリングされたチャートが完成しました。この場合、折れ線グラフのデフォルトのオプションはマージされないことに注意することが重要です。デフォルトのタイプのオプションのみがマージされます。この場合、棒グラフのデフォルトのオプションがマージされることを意味します。これは、棒グラフが、type分野。

描画順序

デフォルトでは、最初のデータセットが最上位になるようにデータセットが描画されます。これは指定することで変更できますorderデータセットのオプション。orderデフォルトは0。

var mixedChart = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [{
            label: 'Bar Dataset',
            data: [10, 20, 30, 40],
            // this dataset is drawn below
            order: 1
        }, {
            label: 'Line Dataset',
            data: [10, 10, 10, 10],
            type: 'line',
            // this dataset is drawn on top
            order: 2
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: options
});